const btn = document.querySelector('.choice-more-btn')
    // document.write("<script language=javascript src=swiper-bundle.min.js’></script>");
$(function() {
    getId()
        // getUserList1()
        // getUserList2()
        // getUserList3()
    loadProduct()
    var goback = document.querySelector('.goBack')
    var sliderbar = document.querySelector('.return1')
    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= 1200) {
            goback.style.display = 'block'
        } else {
            goback.style.display = 'none'
        }
    })
    goback.addEventListener('click', function() {
        // window.scroll(0, 100)
        animate(window, 0)
    });

    // $.ajax({
    //     url: 'http://www.xiongmaoyouxuan.com/api/detail?id=109988684&normal=1&sa=',
    //     type: 'get',
    //     dataType: 'json',
    //     success: function(data) {
    //         showUserList3(data.data.detail.descContentList)

    //     }
    // })


})




let userList = []
    // let strb = ''

// function getUserList1() {
//     $.ajax({
//         url: 'http://www.xiongmaoyouxuan.com/api/detail?id=104686496',
//         type: 'get',
//         dataType: 'json',
//         success: function(data) {
//             showUserList1(data.data.detail)
//         }
//     });
// }

// function showUserList1(userList) {
//     let str2 = `
//     ${userList.shop.title}
//     `
//     strb += str2
//     document.querySelector('.shop-name').innerHTML = strb
// }

// function getUserList2() {
//     $.ajax({
//         url: 'http://www.xiongmaoyouxuan.com/api/detail?id=104686496',
//         type: 'get',
//         dataType: 'json',
//         success: function(data) {
//             showUserList2(data.data.detail.photo)

//         }
//     })
// }

// function showUserList2(userList) {
//     let str = ''
//     userList.forEach(item => {
//         let itemstr = `
//         <div class="swiper-slide"><img src="${item.url}" alt=""></div>
//         `
//         str += itemstr
//         document.querySelector('.swiper-wrapper').innerHTML = str
//     });
// }

// function getUserList3() {
//     $.ajax({
//         // url: 'http://www.xiongmaoyouxuan.com/api/detail?id=104686496',
//         url: 'http://www.xiongmaoyouxuan.com/api/detail?id=109988684&normal=1&sa=',
//         type: 'get',
//         dataType: 'json',
//         success: function(data) {
//             showUserList3(data.data.detail.descContentList)

//         }
//     })
// }

// function showUserList3(userList) {
//     console.log(userList[0].image);
//     let str = ''
//     userList.forEach(ele => {
//         let itemstr = `
//                 <img src="${ele.photo.url}" alt="">
//                 `
//         str += itemstr
//         document.querySelector('.imgs').innerHTML = str
//     });
// }








function animate(obj, target, callback) {
    clearInterval(obj.timer)
    obj.timer = setInterval(function() {
        var step = (target - window.pageYOffset) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        if (window.pageYOffset == target) {
            clearInterval(obj.timer)
                // if (callback) {
                //     callback()
                // }
            callback && callback()
        }
        // obj.style.left = obj.offsetLeft + step + 'px'
        window.scroll(0, window.pageYOffset + step)
    }, 15)
}
// 获取商品ID
function getId() {
    // console.log(location.href);
    let url = location.href
    let index = url.indexOf('?')
    let subUrl = url.substring(index + 1)
    let id = subUrl.split('=')[1]
    return id
}

function loadProduct() {
    let id = getId()
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/detail',
        type: 'get',
        data: {
            id
        },
        success: function(data) {
            console.log(data);
            showDetail(data.data.detail)
                // showDetail1(data.data.detail)
        }
    })
}


function showDetail(userList) {
    let Str1 = `<div class="commodity">
    <div class="left">
        <div class="photos">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="${userList.photo[0].url}" alt=""></div>
                    <div class="swiper-slide"><img src="${userList.photo[1].url}" alt=""></div>
                    <div class="swiper-slide"><img src="${userList.photo[2].url}" alt=""></div>
                    <div class="swiper-slide"><img src="${userList.photo[3].url}" alt=""></div>
                    <div class="swiper-slide"><img src="${userList.photo[4].url}" alt=""></div>
                    
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="discount">
            <h1 class="title">
                <div class="title-icon">
                    <img src="img/淘宝小logo.png" alt="" class="platform">
                    <img src="img/包邮小logo.png" alt="" class="free-postage">
                </div>
                ${userList.title}
            </h1>
            <div class="price">
                <p class="original-price">
                    <i>原价¥${userList.tbOriginPrice}</i>
                </p>
                <div class="last-price">
                    <span font-size: 20px; class="num"> 券后价:</span>
                    <span class="nowprice">
                        <i class="value-tag" font-size: 20px;>¥</i>
                        <span class="big">${userList.price}</span>

                    <span class="digit"></span>
                    </span>
                    <span class="coupou-info">${userList.couponValue}</span>
                    <span class="sale-num">${userList.saleNum}人已买</span>
                </div>
            </div>
            <p class="limit">
                <span>优惠有效期:${userList.expireDate}</span>
            </p>
            <br> <br> <br>
            <div class="clear">
                <button class="goBtn" onclick="addToCart(${userList.id})">加入购物车</button>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <span class="line"></span>
            <span class="txt">卖家信息</span>
            <span class="line"></span>
        </div>
        <img src="${userList.shop.coverUrl}" alt="">
        <div class="shop-name">${userList.shop.title}</div>
        <div class="shop-score">
            <ul class="character">
                <li>描述</li>
                <li>服务</li>
                <li>物流</li>
            </ul>
            <ul class="score">
                <li>${userList.shop.itemScore}</li>
                <li>${userList.shop.serviceScore}</li>
                <li>${userList.shop.deliveryScore}</li>
            </ul>
        </div>
    </div>
</div>
<div class="cmd-detail">
    <div class="imgs">
        <img src="${userList.descContentList[0].photo.url}" alt="">
        <img src="${userList.descContentList[1].photo.url}" alt="">
        <img src="${userList.descContentList[2].photo.url}" alt="">
        <img src="${userList.descContentList[3].photo.url}" alt="">
        <img src="${userList.descContentList[4].photo.url}" alt="">
    </div>
</div>`
        // str += Str1
    document.querySelector('.container1').innerHTML = Str1


    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

// function getNid() {
//     console.log(location.href);
//     let url = location.href
//     let index = url.indexOf('?')
//     let subUrl = url.substring(index + 1)
//     let nid = subUrl.split('=')[1]
//     return nid
// }

function addToCart(id) {
    // alert(nid)
    // let nid = getid()
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/detail',
        type: 'get',
        data: {
            'id': id
        },
        async: false,
        success: function(data) {
            console.log(data);
            showDetail1(data.data.detail)
        },
        error: function() {
            alert('888888')
        }
    })

    // localStorage.setItem('imgsrc', $ { userList.photo[0].url })
    // location.href = 'cart.html?id=' + nid
}

function showDetail1(userList) {
    var img = userList.photo[0].url
    var shopTitle = userList.shop.title
    var price = userList.price
        // localStorage.setItem({
        //         imgsrc,
        //         img
        //     }, {
        //         Title,
        //         shopTitle
        //     }, {
        //         price,
        //         price
        //     })
    var currentUser = localStorage.getItem('currentUser');
    var beforenum = (localStorage.getItem(currentUser + 'num') == null) ? 0 : localStorage.getItem(currentUser + 'num');
    var nownum = Number(beforenum) + 1;
    localStorage.setItem(currentUser + 'num', nownum);

    localStorage.setItem(currentUser + 'img' + nownum, img);
    localStorage.setItem(currentUser + 'shopTitle' + nownum, shopTitle);
    localStorage.setItem(currentUser + 'price' + nownum, price);

    // localStorage.setItem({ imgsrc, img }, { Title, shopTitle }, { price, price })

    for (var i = 1; i <= nownum; i++) {
        console.log(localStorage.getItem(currentUser + 'img' + i));
        console.log(localStorage.getItem(currentUser + 'shopTitle' + i));
        console.log(localStorage.getItem(currentUser + 'price' + i));
        console.log(localStorage.getItem(currentUser + 'num'));
        // localStorage.setItem(i, i)
        // console.log(localStorage.getItem(i));
    }



}

function procartBtn() {
    let id = getId()
    location.href = 'cart.html?id=' + id

}